<template>
	<view class="container">
		<view class="rank_header" :style="{ 'background-image': `url(/static/rank_header.png)`}">
			<topTitle>
				<template #content>
					<view style="width: 100%;display: flex;align-items: center;"
					@click="loginClick">
						<image src="/static/logo.png" mode="aspectFit" class="avatar-top"></image>
						<view style="margin: 0 20rpx;font-size: 32rpx;color: #fff;">
							欢迎您，
							<text>18888888888</text>
						</view>
					</view>
				</template>
			</topTitle>
			<!-- 数据统计区域 -->
			<view class="data-stats">
				<view class="data-item">
					<text class="data-label">总佣金</text>
					<text class="data-value">{{$formatAmount(25165)}}</text>
				</view>
				<view class="data-item">
					<text class="data-label">已提佣金</text>
					<text class="data-value">{{$formatAmount(12183)}}</text>
				</view>
			</view>

			<!-- 数据卡片，展示今日和昨日数据 -->
			<view class="data-card">
				<!-- 第一行数据 -->
				<view class="data-row">
					<view class="data-col">
						<text class="data-number">1,500</text>
						<text class="data-desc">今日成交额</text>
					</view>
					<view class="data-col">
						<text class="data-number">4,200</text>
						<text class="data-desc">今日订单</text>
					</view>
					<view class="data-col">
						<text class="data-number">3,400</text>
						<text class="data-desc">累计订单</text>
					</view>
				</view>
				<!-- 第二行数据 -->
				<view class="data-row">
					<view class="data-col">
						<text class="data-number">2,350</text>
						<text class="data-desc">昨日成交额</text>
					</view>
					<view class="data-col">
						<text class="data-number">5,200</text>
						<text class="data-desc">昨日订单</text>
					</view>
					<view class="data-col">
						<text class="data-number">40</text>
						<text class="data-desc">退款中订单</text>
					</view>
				</view>
			</view>

			<!-- 提现记录图表 -->
			<view class="chart-section">
				<view class="chart-header">
					<text class="chart-title">提现记录</text>
					<view class="chart-right">
						<text class="chart-unit">单位：元</text>
						<uni-icons type="right" size="34rpx" color="#999"></uni-icons>
					</view>

				</view>
				<view class="chart-container">
					<!-- 这里放置图表，例如使用u-chart等组件 -->
					<l-echart class="line-chart" ref="lineChart"></l-echart>
					<!-- 					<u-chart :canvasId="'chart'" :ec="'{type: \'line\', data: chartData}'" :width="375"
						:height="200"></u-chart> -->
				</view>
			</view>


			<!-- 			<view class="cate_name acea-row row-center row-middle">
				<text class="title_icon icon_left" :style="{ 'background-image': `url(${domain}/static/images/rank-title.png)`}"></text>
				<text class="line1 name">{{(active == 0 || !cate_name) ? '热销TOP总榜单' : `${cate_name}热卖榜`}}</text>
				<text class="title_icon icon_right" :style="{ 'background-image': `url(${domain}/static/images/rank-title.png)`}"></text>
			</view> -->
			<!-- 			<view class="scroll_box">
				<scroll-view scroll-x="true" style="white-space: nowrap; vertical-align: middle;" show-scrollbar="false" 
				:scroll-left="tabLeft">
					<view class="scroll_item" 
						v-for="(item,index) in categoryList" 
						:key="item.store_category_id" 
						:id="`cate${item.store_category_id}`"
						:data-index="item.store_category_id"
						@click="checkActive(item,index,true)"
						:class="active == item.store_category_id ? 'scroll_item_active' : ''">{{item.cate_name}}
					</view>
				</scroll-view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
	export default {
		data() {
			return {
				title: 'Hello',


			}
		},
		onPageScroll(e) {
			console.log(e)
		},
		onLoad() {

		},
		mounted() {
			this.loadLineData()
		},
		methods: {
			loginClick() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			//加载折线图数据
			loadLineData() {
				//这里请求服务器拿到数据
				let res = {
					//x轴数据
					xData: ['6/11', '6/12', '6/13', '6/14', '6/15', '6/16', '6/17'],
					//y轴数据
					yData: [50, 120, 150, 220, 180, 300, 130]
				}
				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				let option = {
					xAxis: {
						type: 'category',
						// x轴数据文字颜色
						axisLabel: {
							color: '#a7a7a7'
						},
						// x轴那天坐标轴线的颜色
						axisLine: {
							lineStyle: {
								color: '#f1f1f1',
							}
						},
						//x轴上面刻度线隐藏
						axisTick: {
							show: false,
						},
						//这里是x轴数据
						data: res.xData
					},
					//设置网格
					grid: {
						// show: true,
						top: 40,
						bottom: 30,
					},
					//y轴设置
					yAxis: {
						type: 'value',
						//y轴标签文字颜色
						axisLabel: {
							color: '#a7a7a7'
						},
						// y轴分割线设置为虚线
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					//设置提示为点击时
					tooltip: {
						trigger: 'axis',
						triggerOn: 'click',
						formatter: '{b} \n 数据: {c}'
					},
					//设置曲线的颜色
					color: ['#0265ff'],
					series: [{
						//这里是数据
						data: res.yData,
						type: 'line',
						//设置为平滑，默认为折线
						// smooth: true,

						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(2, 101, 255,0.3)'
								}, {
									offset: 1,
									color: 'rgba(255, 255, 255,0)'
								}])
							}
						}
					}],
					//设置数据缩放，手指缩放
					// dataZoom:{
					// 		type:'inside',//inside移动端就是手指缩放，slider
					// 		id:'123',
					// }
				};
				this.$refs.lineChart.init(echarts, chart => {
					chart.setOption(option);
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: #f8f8f8;
	}

	.container {
		width: 100%;
		height: 100%;
		background: #f8f8f8;

	}

	.rank_header {
		background-size: cover;
		height: 600rpx;
		width: 100%;
	}

	.avatar-top {
		width: 60rpx;
		height: 60rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
	}

	.data-stats {
		display: flex;
		justify-content: space-around;
		padding: 50rpx 0;
		color: white;

		.data-item {
			text-align: center;
			display: flex;
			flex-direction: column;

			.data-label {
				font-size: 26rpx;
				margin: 10rpx 0;
			}

			.data-value {
				font-size: 42rpx;
				font-weight: bold;
			}
		}
	}

	.data-card {
		margin: 0 30rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.data-row {
		display: flex;
		justify-content: space-around;
		margin-bottom: 25rpx;
	}

	.data-col {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.data-number {
		font-size: 42rpx;
		// font-weight: bold;
		margin-bottom: 5rpx;
	}

	.data-desc {
		font-size: 24rpx;
		color: #999;
	}

	.chart-section {
		margin: 30rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;

		.chart-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.chart-title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.chart-right {
				display: flex;
				align-items: center;

				.chart-unit {
					font-size: 24rpx;
					color: #999;
				}
			}

		}

		.chart-container {
			width: 100%;
			box-sizing: border-box;

			.line-chart {
				width: 100%;
				margin-top: 30rpx;
				height: 380rpx;
			}
		}
	}
</style>